<template>
  <div class="person">
    <IndexHeader></IndexHeader>
    <div class="main">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item
          ><a href="javascript:void(0)">个人信息</a></el-breadcrumb-item
        >
      </el-breadcrumb>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="ruleForm"
      >
        <el-form-item label="手机">
          <el-input v-model="ruleForm.tel"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="ruleForm.eMail"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="realName">
          <el-input v-model="ruleForm.realName"></el-input>
        </el-form-item>
        <el-form-item label="出生日期" required>
          <el-col :span="11">
            <el-form-item prop="birthday">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm.birthday"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="ruleForm.gender">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="个人简介">
          <el-input type="textarea" v-model="ruleForm.personInfo"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交信息</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button @click="$router.go(-1)">返回</el-button>
        </el-form-item>
      </el-form>
      <el-button type="danger" @click="logout">退出登录</el-button>
    </div>
  </div>
</template>

<script>
import userApi from "@/api/user";
import IndexHeader from "@/components/IndexHeader";
export default {
  name: "person",
  components: {
    IndexHeader,
  },
  data() {
    return {
      ruleForm: {
        tel: "",
        eMail: "",
        name: "",
        realName: "",
        birthday: "",
        gender: "",
        personInfo: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        realName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        birthday: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
      },
    };
  },
  mounted() {
    var formData = new FormData();
    formData.append("tel", this.userInfo.tel);
    formData.append("sms", "1111");
    formData.append("type", "sms");
    userApi.checkLoginByTel(formData).then((res) => {
      console.log(res.data.data);
      var userInfo = res.data.data;
      localStorage.setItem("userInfo", JSON.stringify(res.data.data));
      this.ruleForm.tel = userInfo.tel;
      this.ruleForm.eMail = userInfo.eMail;
      this.ruleForm.name = userInfo.userName;
      this.ruleForm.realName = userInfo.realName;
      this.ruleForm.birthday = userInfo.date;
      this.ruleForm.gender = userInfo.gender;
      this.ruleForm.personInfo = userInfo.personInfo;
    });
  },
  computed: {
    userInfo() {
      return JSON.parse(localStorage.getItem("userInfo"));
    },
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var formData = new FormData();
          formData.append("userId", this.userInfo.userId);
          formData.append("tel", this.ruleForm.tel);
          formData.append("userName", this.ruleForm.name);
          formData.append("realName", this.ruleForm.realName);
          formData.append("eMail", this.ruleForm.eMail);
          formData.append(
            "date",
            this.dateFormat("YYYY-mm-dd", this.ruleForm.birthday)
          );
          formData.append("gender", this.ruleForm.gender);
          formData.append("personInfo", this.ruleForm.personInfo);
          userApi.updateUser(formData).then((res) => {
            console.log(res.data.data);
            if (res.data.code == 200) {
              this.$message({
                message: "信息提交成功",
                type: "success",
              });
            }
          });
        } else {
          this.$message({
            message: "请将信息填写完整",
            type: "warning",
          });
          return false;
        }
      });
    },
    dateFormat(fmt, date) {
      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        // "H+": date.getHours().toString(), // 时
        // "M+": date.getMinutes().toString(), // 分
        // "S+": date.getSeconds().toString(), // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
          );
        }
      }
      return fmt;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    logout() {
      localStorage.removeItem("userInfo")
      this.$router.push("login")
    }
  },
};
</script>

<style scoped>
.person {
  background-color: #f7f7f7;
}
.main {
  padding: 0 320px;
  margin-top: 16px;
}
.ruleForm {
  margin-top: 20px;
}
</style>